import { t } from 'i18next'
import React, { useEffect, useState } from 'react'
import { Tab, Search } from '@kedacom/react-next'
import { StyledMemberList } from './style'
import { Draggable } from '@/plugins/dnd'
import { useDebounceEffect } from 'ahooks'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
import { ListItem } from './listItem'
import useGetList from './useGetList'
import { useUserOftenStore } from '../../blocks/user/often/store'
import { useUserInteractiveStore } from '../../blocks/user/interactive/store'
import { SimpleUserModel, UserModel } from '../../blocks/user/interface'
import { useBasicInfoStore } from '../../blocks/basicInfo/store'
import { useCreateContentStore } from '../../store'
import { useUserAllStore } from '../../blocks/user/all/store'
import { ListItemGhost } from '../DndGhost'
import { useGlobalStore } from '@/store/global'

export interface MemberListProps {
	canDrag?: boolean
	height?: number
}
interface RowRendererProps extends ListChildComponentProps {
	data: {
		list: UserModel[]
		isCascade: boolean
		canDrag: boolean
		tab: string
		openMap: { [uuid: string]: boolean }
		setOpenMap: (val: { [uuid: string]: boolean }) => void
		handleOpenTree: (uuid: string) => void
	}
}
const rowRenderer = React.memo(({ data, index, style }: RowRendererProps) => {
	const rowData = data.list[index]
	const dataTransfer = () => {
		return {
			data: {
				mt: rowData.mcc,
			},
			from: 'memberList',
		}
	}
	return (
		<Draggable
			//非本级会议可拖拽
			canDrag={data.canDrag}
			dataTransfer={dataTransfer}
			ghostRender={<ListItemGhost data={rowData.mcc} />}
			style={style}
		>
			<ListItem
				tab={data.tab}
				openMap={data.openMap}
				setOpenMap={data.setOpenMap}
				isCascade={false}
				handleOpenTree={data.handleOpenTree}
				{...rowData}
			/>
		</Draggable>
	)
})

/** 会控终端列表组件
 *  创会暂未实现
 */
export default function MemberList(props: MemberListProps) {
	const { canDrag = true, height = 390 } = props
	const superMtNum = useBasicInfoStore.getState().superMtNum ? 1 : 0
	useEffect(() => {
		if (superMtNum) {
			setTab('interactive')
		} else {
			setTab('all')
		}
	}, [])
	const [onlineList, setOnlineList] = useState<UserModel[]>([])
	const [searchVal, setSearchVal] = useState('')
	const [tab, setTab] = useState('all')
	const [actualSearchVal, setActualSearchVal] = useState('')
	const handleSearch = (val: string) => {
		setSearchVal(val)
	}
	useDebounceEffect(
		() => {
			setActualSearchVal(searchVal)
		},
		[searchVal],
		{
			wait: 250,
		}
	)
	const tableOften: SimpleUserModel[] = useUserOftenStore((state) => state.list)
	const tableInteractive: SimpleUserModel[] = useUserInteractiveStore((state) => state.list)
	const tableAll: UserModel[] = useUserAllStore((state) => state.tree)

	const isCascade = false
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const {
		list,
		openMap,
		setOpenMap,
		getListFromTableAll,
		flatAllTreeToList,
		setList,
		getListFromTableOften,
		getListFromTableInteractive,
	} = useGetList()
	const handleOpenTree = (uuid: string) => {
		/**展开uuid*/
		openMap[uuid] = !openMap[uuid]
		setOpenMap(openMap)
		/**获取全部树列表*/
		const tableAll: UserModel[] = useUserAllStore.getState().tree
		console.log(tableAll)
		/**获取全部树列表*/
		let result = flatAllTreeToList(tableAll, actualSearchVal)
		setList(result)
	}
	useEffect(() => {
		if (superMtNum === 0 && tab === 'all') {
			getListFromTableAll(tableAll, actualSearchVal)
		}
	}, [tableAll, tab, actualSearchVal, superMtNum])
	useEffect(() => {
		if (superMtNum === 0 && tab === 'often') {
			getListFromTableOften(tableOften, actualSearchVal)
		}
	}, [tableOften, tab, actualSearchVal, superMtNum])
	useEffect(() => {
		if (superMtNum === 1) {
			setTab('interactive')
			getListFromTableInteractive(tableInteractive, actualSearchVal)
		}
	}, [tableInteractive, actualSearchVal, superMtNum])
	useEffect(() => {
		setOnlineList(list)
	}, [list])
	return (
		<StyledMemberList className="member-list-wrap" height={height}>
			{superMtNum === 0 && !!SWITCH.showOftenMt && (
				<Tab
					className="member-tab"
					type="button"
					data={[
						{
							label: t('全部终端'),
							value: 'all',
						},
						{
							label: t('常用终端'),
							value: 'often',
						},
					]}
					value={tab}
					onChange={(e, val) => {
						setTab(val)
						handleSearch('')
					}}
				/>
			)}
			<Search
				className="search"
				iconAlign="left"
				placeholder={t('请输入关键词搜索')}
				value={searchVal}
				onChange={(e, val) => handleSearch(val)}
				onClear={() => handleSearch('')}
				clearable
			></Search>
			<div className="member-list">
				<AutoSizer>
					{({ width, height }) => {
						return (
							<List
								width={width}
								height={height}
								itemCount={onlineList.length}
								itemSize={36}
								itemData={{
									list: onlineList,
									isCascade,
									canDrag,
									openMap,
									tab,
									setOpenMap,
									handleOpenTree,
								}}
								itemKey={(index, data) => index}
							>
								{rowRenderer}
							</List>
						)
					}}
				</AutoSizer>
			</div>
		</StyledMemberList>
	)
}
